<template>
  <div class="container">
    <div class="submit">
    <h1>患者1 诊断及治疗方案</h1>
    <el-button
      type="primary"
      icon="el-icon-edit"
      plain
      size="small"
    >完成</el-button>
    </div>
    <div class="source">
      <h2>诊断</h2>
      <el-form   size="medium" label-width="50px"
                 label-position="left">
        <el-row  type="flex">
          <el-form-item label="诊断1">
            <el-input v-model="diagnosis1"  placeholder="请输入诊断1" clearable :style="{width: '90%'}">
            </el-input>
          </el-form-item>
          <el-form-item  label="诊断2">
            <el-input v-model="diagnosis2" placeholder="请输入诊断2" clearable :style="{width: '90%'}">
            </el-input>
          </el-form-item>
          <div class="addZ">
            <el-button
              type="primary"
              circle
              size="small"
            >添加诊断</el-button>
          </div>
        </el-row>
      </el-form>
    </div>
    <div class="sourceTwo">
      <h2>治疗目标</h2>
      <el-form size="medium" label-width="100px">
        <el-form-item label="治疗目标">
          <el-input v-model="diagnosis3"  type="textarea" placeholder="请输入治疗目标"
                     :autosize="{minRows: 4, maxRows: 4}" :style="{width: '90%'}"></el-input>
        </el-form-item>
      </el-form>
    </div>
    <div class="sourceTwo">
      <h2>相关症状</h2>
      <el-form label-width="50px">
        <h3>是否有以下症状(可多选)</h3>
        <el-form-item>
          <el-checkbox-group v-model="check" type="flex">
            <el-checkbox label="无"></el-checkbox>
            <el-checkbox label="测试1"></el-checkbox>
            <el-checkbox label="测试2"></el-checkbox>
            <el-checkbox label="测试3"></el-checkbox>
            <el-checkbox label="测试4"></el-checkbox>
            <el-checkbox label="测试5"></el-checkbox>
          </el-checkbox-group>
        </el-form-item>
      </el-form>
    </div>
    <div class="sourceTwo">
      <h2>药物</h2>
      <el-form label-width="70px">
        <h3>激素药物</h3>
        <el-row  type="flex">
          <el-form-item label="药名1">
            <el-input v-model="medic.name" placeholder="请输入药名" clearable :style="{width: '90%'}">
            </el-input>
          </el-form-item>
          <el-form-item  label="用法用量">
            <el-input v-model="medic.use"  placeholder="请输入内容" clearable :style="{width: '90%'}">
            </el-input>
          </el-form-item>
          <div class="addZ">
            <el-button
              type="primary"
              circle
              size="small"
            >添加诊断</el-button>
          </div>
        </el-row>
        <h3>其他对应治疗药物</h3>
        <el-row  type="flex">
          <el-form-item label="药名1">
            <el-input v-model="fM.name" placeholder="请输入药名" clearable :style="{width: '90%'}">
            </el-input>
          </el-form-item>
          <el-form-item label="用法用量">
            <el-input v-model="fM.use" placeholder="请输入内容" clearable :style="{width: '90%'}">
            </el-input>
          </el-form-item>
          <div class="addZ">
            <el-button
              type="primary"
              circle
              size="small"
            >添加诊断</el-button>
          </div>
        </el-row>
        <h3>中成药及辅助用药</h3>
        <el-row  type="flex">
          <el-form-item label="药名1">
            <el-input v-model="zM.name" placeholder="请输入药名" clearable :style="{width: '90%'}">
            </el-input>
          </el-form-item>
          <el-form-item label="用法用量">
            <el-input v-model="zM.use"  placeholder="请输入内容" clearable :style="{width: '90%'}">
            </el-input>
          </el-form-item>
          <div class="addZ">
            <el-button
              type="primary"
              circle
              size="small"
            >添加诊断</el-button>
          </div>

        </el-row>
        <div class="sourceThree">
          <el-form-item label="营养及运动指导" label-width="110px">
            <el-input v-model="health"  type="textarea" placeholder="请输入治疗目标"
                       :autosize="{minRows: 4, maxRows: 4}" :style="{width: '90%'}"></el-input>
          </el-form-item>
        <el-form-item label="心理指导" label-width="110px">
          <el-input v-model="think" type="textarea" placeholder="请输入治疗目标"
                     :autosize="{minRows: 4, maxRows: 4}" :style="{width: '90%'}"></el-input>
        </el-form-item>
        <el-form-item label="其他方案" label-width="110px">
          <el-input  v-model="other" type="textarea" placeholder="请输入治疗目标"
                     :autosize="{minRows: 4, maxRows: 4}" :style="{width: '90%'}"></el-input>
        </el-form-item>
        </div>
      </el-form>

    </div>
    </div>
</template>
<script>
export default {
  name:'way',
  data() {
    return {
      // 表单参数
      form: {},
      // 表单校验
      rules: {},
      diagnosis1: '',
      diagnosis2: '',
      diagnosis3: '',
      check: [],
      medic:{
        name:'',
        use: ''
      },
      fM:{
        name:'',
        use: ''
      },
      zM:{
        name: '',
        use: ''
      },
      health:'',
      think:'',
      other:''
    };
  },
  created() {
    this.getList();
  },
  methods: {
    /** 查询医生患者列表 */
    getList() {},
    // 查看诊断治疗方案
    checkWay(){},
    // 取消按钮
    cancel() {},
    // 表单重置
    reset() {},
    // 多选框选中数据
    handleSelectionChange(selection) {},
    /** 新增按钮操作 */
    handleAdd() {},
    /** 修改按钮操作 */
    handleUpdate(row) {},
    /** 提交按钮 */
    submitForm() {}
  },
}
</script>
<style scoped>
.source{
  box-shadow: #b4bccc 1px 1px 10px 1px;
  padding-bottom: 5%;
}
.sourceTwo{
  position: relative;
  top: 20px;
  box-shadow: #b4bccc 1px 1px 10px 1px;
  padding-bottom: 5%;
}
.sourceThree{
  position: relative;
  top: 20px;
}
.addZ{
  box-shadow: #b4bccc 1px 1px 10px 1px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100px;
  width: 90%;
}
.el-row{
  flex-direction: column;
  translate: 5%;
}
.el-checkbox-group{
  display: flex;
  flex-direction: column;
  padding: 10px;
  flex-wrap: wrap;
}
.submit{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
h1{
  width: 250px;
  color: #1e1e1e;
  font-weight: bolder;
}
h2{
  position: relative;
  color: orange;
  font-weight: bolder;
  left: 10px;
}
.container{
  width: 90%;
  margin: auto;
  padding-bottom: 5%;
}
.el-form-item__label{
  background: #00afff;
}
</style>
